<template>
	<view class="container">
		<view class="deposit-wrapper">
			<view class="banner"></view>
			<view class="charge-money-title">入金金额（CNY）</view>
			<view class="charge-money-list flex justify-between">
				<view class="charge-item flex align-center justify-center"
					:class="index==chargeMoneyIndex?'charge-item-active':''" v-for="(item,index) in chargeList"
					@tap="chargeMoneySelect(index)">
					<text class="unit" :class="index==chargeMoneyIndex?'unit-active':''">￥</text>
					<text class="money" :class="index==chargeMoneyIndex?'money-active':''">{{item}}</text>
				</view>
			</view>
			<view class="transfer-input-wrapper flex align-end">
				<text class="unit">￥</text>
				<u-input class="input" v-model="value" type="digit" />
			</view>
		</view>
		<view class="charge-list">
			<view class="charge-item flex align-center justify-between" @tap="chargeIndex=0">
				<view class="yl-icon"></view>
				<view class="flex flex-column wrapper">
					<text class="charge-name">银联转账</text>
					<text class="up-color">单笔限额500-49999元</text>
				</view>

				<view :class="chargeIndex==0?'charge-select-icon':'common-icon'"></view>
			</view>
			<view v-if="info.ali_pay_status" class="charge-item flex align-center justify-between" @tap="chargeIndex=1">
				<view class="alipay-icon"></view>
				<view class="flex flex-column wrapper">
					<text class="charge-name">支付宝支付</text>
					<text class="up-color">单笔限额500-49999元</text>
				</view>
				<view :class="chargeIndex==1?'charge-select-icon':'common-icon'"></view>
			</view>
			<view v-if="info.ali_pay_zhuanzhang_status" class="charge-item flex align-center justify-between"
				@tap="chargeIndex=3">
				<view class="alipay-icon"></view>
				<view class="flex flex-column wrapper">
					<text class="charge-name">支付宝转账</text>
					<text class="up-color">单笔限额1200-10000元</text>
				</view>
				<view :class="chargeIndex==3?'charge-select-icon':'common-icon'"></view>
			</view>
			<view v-if="info.weixin_pay_status" class="charge-item flex align-center justify-between"
				@tap="chargeIndex=2">
				<view class="wx-icon"></view>
				<text class="charge-name">微信支付</text>
				<view :class="chargeIndex==2?'charge-select-icon':'common-icon'"></view>
			</view>
		</view>
		<view class="common-btn submit-btn" @tap="submit">确认支付{{value?'￥'+value:''}}</view>
		
		<view class="beizhu">交易由纽约商品交易所及港交所实盘对接</view>
		<view class="beizhu">合作伙伴：平安保险|金瑞期货|芝加哥商品交易所|CME集团</view>
		<view class="beizhu">香港交易所|新加坡交易所|欧洲期货交易所</view>
		<view class="beizhu">7*24小时在线客服QQ：95766229</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chargeMoneyIndex: 0,
				value: "",
				chargeIndex: 0,
				chargeList: [],
				info: {}
			};
		},
		methods: {
			//判断是否在微信中  
			isWechat() {  
				var ua = window.navigator.userAgent.toLowerCase();  
				if (ua.match(/micromessenger/i) == 'micromessenger') {  
					//console.log('是微信客户端')    
					return true;  
				} else {  
					//console.log('不是微信客户端')    
					return false;  
				}  
			},
			chargeMoneySelect(index) {
				if (this.chargeMoneyIndex == index) {
					return false
				}
				this.chargeMoneyIndex = index
				this.value = this.chargeList[index]
			},
			async submit() {
				if (!this.value) {
					uni.showToast({
						icon: "none",
						title: "请输入金额"
					})
					return
				}
				
				
				switch (this.chargeIndex) {
					//银联转账
					case 0:
						this.$Router.push({
							path: "/pages/bankCardCharge/bankCardCharge",
							query: {
								money: this.value
							}
						})
						break
						//支付宝支付
					case 1:
						try {
							let res = await this.$u.api.alipayH5Api({
								totalAmount: this.value
							})
							// #ifdef APP-PLUS
							this.$Router.push({
								path: "/pages/webview/webview",
								query: {
									url: res.web_url
								}
							})
							// #endif
							// #ifdef H5
							
							console.log(123)
							if(this.isWechat()){
								this.$Router.push({
									path: "/pages/deposit/paytourl",
									query: {
										info: encodeURIComponent(res.web_url)
									}
								})
								break
							}else{
								window.location.href = res.web_url
							}
							// #endif
						} catch (e) {
							//TODO handle the exception
						}
						break
					case 2:
						break
					case 3:
						this.$Router.push({
							path: "/pages/alipayTransfer/alipayTransfer",
							query: {
								money: this.value
							}
						})
						break
					default:
						break
				}
				try {

					// uni.showToast({
					// 	icon:"success",
					// 	title:"转出成功"
					// })
				} catch (e) {
					//TODO handle the exception
				}
			}
		},
		async onLoad() {
			try {
				let res = await this.$u.api.depositInfoApi()
				this.chargeList = res.reg_push
				this.info = res
				this.value = this.chargeList[0]
			} catch (e) {
				//TODO handle the exception
			}
		}
	}
</script>

<style lang="scss">
	.beizhu{
		text-align: center;
		font-size: 25rpx;;
	}
	
	.container {
		.deposit-wrapper {
			padding: 24rpx 30rpx;
			background-color: #fff;

			.banner {
				height: 200rpx;
				background: url("~@/static/images/deposit/banner.png");
				background-size: 100% 100%;
			}

			.charge-money-title {
				margin-top: 36rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.charge-money-list {
				flex-wrap: wrap;
				margin-top: 20rpx;

				.charge-item {
					position: relative;
					width: 30%;
					height: 70rpx;
					background: #F9F9F9;
					border-radius: 8rpx;

					&:nth-child(n+4) {
						margin-top: 20rpx;
					}

					.unit {
						margin-right: 8rpx;
						font-size: 26rpx;
						color: $color-blue;
					}

					.money {
						font-size: 30rpx;
						font-weight: 500;
						color: $color-blue;
					}
				}

				.charge-item-active {
					border: 1rpx solid $color-blue;
				}

				.unit-active {
					color: $color-blue;
				}

				.money-active {
					color: $color-blue;
				}
			}

			.transfer-input-wrapper {
				padding: 30rpx 0 18rpx 0;
				border-bottom: 2rpx solid #F0F8FF;

				.unit {
					margin-right: 10rpx;
					font-size: 26rpx;
					color: #333333;
					line-height: 70rpx;
				}

				.input {
					flex: 1;
					font-size: 50rpx;
					font-weight: 500;
					color: #333333;
				}

				.close-icon {
					width: 48rpx;
					height: 48rpx;
					background: url("~@/static/images/moneyTransfer/close-icon.png");
					background-size: 100% 100%;
				}
			}


		}

		.charge-list {
			margin-top: 18rpx;
			background-color: #fff;

			.charge-item {
				padding: 28rpx;

				.yl-icon {
					width: 72rpx;
					height: 72rpx;
					background: url("~@/static/images/deposit/yl-icon.png");
					background-size: 100% 100%;
				}

				.alipay-icon {
					width: 72rpx;
					height: 72rpx;
					background: url("~@/static/images/deposit/alipay.png");
					background-size: 100% 100%;
				}

				.wx-icon {
					width: 72rpx;
					height: 72rpx;
					background: url("~@/static/images/deposit/wx-icon.png");
					background-size: 100% 100%;
				}
				.wrapper{
					margin-left: 22rpx;
					margin-right: auto;
				}
				.charge-name {
					
					font-size: 30rpx;
					color: #333333;
				}

				.charge-select-icon {
					width: 48rpx;
					height: 48rpx;
					background: url("~@/static/images/deposit/charge-select-icon.png");
					background-size: 100% 100%;
				}

				.common-icon {
					width: 48rpx;
					height: 48rpx;
					background: url("~@/static/images/deposit/charge-common-icon.png");
					background-size: 100% 100%;
				}
			}
		}

		.submit-btn {
			margin: 60rpx 30rpx;
		}
	}
</style>
